```jsx
import * as accordion from "@zag-js/accordion"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId, For } from "solid-js"

const data = [
  { title: "Watercraft", content: "Sample accordion content" },
  { title: "Automobiles", content: "Sample accordion content" },
  { title: "Aircraft", content: "Sample accordion content" },
]

function Accordion() {
  const service = useMachine(accordion.machine, { id: createUniqueId() })

  const api = createMemo(() => accordion.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <For each={data}>
        {(item) => (
          <div {...api().getItemProps({ value: item.title })}>
            <h3>
              <button {...api().getItemTriggerProps({ value: item.title })}>
                {item.title}
              </button>
            </h3>
            <div {...api().getItemContentProps({ value: item.title })}>
              {item.content}
            </div>
          </div>
        )}
      </For>
    </div>
  )
}
```
